<script setup>

import {ref} from 'vue'

const userList = ref([
    {
      uid: '1',
      name: '张三',
      age: 18,
      phone: '12345678901',
      password: '123456',
      address: '北京市朝阳区芍药居',
      status: '0'
    }
])

import {getAllUser} from '@/util/user.js'

const getUserList = async () => {
  const data = await getAllUser();
  userList.value = data;
  userList.value.forEach((item) => {
    item.status==0?'禁止':'启用'
  })
}

//vue3的语法还不太会，我测
</script>

<template>
  <button @click="getUserList">获取用户列表</button>
  <br>
   <el-button type="info">添加用户</el-button>
  <br>
<!--   使用的属性包括 :data  :width  prop 字段名称 对应列内容的字段名， 也可以使用 property属性 显示的标题-->
   <el-table  :data="userList" style="width: 100%">
     <el-table-column prop="uid" label="编号"></el-table-column>
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="age" label="年龄"></el-table-column>
     <el-table-column prop="phone" label="手机号"></el-table-column>
     <el-table-column prop="password" label="密码"></el-table-column>
     <el-table-column prop="address" label="地址"></el-table-column>
     <el-table-column prop="status" label="状态">
       <template #default="scope">
          <el-switch v-model="scope.row.status"></el-switch>
       </template>
     </el-table-column>
   </el-table>
</template>

<style scoped>

</style>
